<cnsl-card title="{{ 'SETTING.SECRETS.TYPE.' + generatorType | translate }}">
  <form *ngIf="specsForm" [formGroup]="specsForm" (ngSubmit)="saveSecretGenerator()">
    <cnsl-form-field class="generator-form-field" label="Expiration">
      <cnsl-label>{{ 'SETTING.SECRETS.EXPIRY' | translate }}</cnsl-label>
      <input cnslInput name="expiry" type="number" formControlName="expiry" id="{{ 'expiry' + generatorType }}" />
    </cnsl-form-field>

    <cnsl-form-field class="generator-form-field" label="Length">
      <cnsl-label>{{ 'SETTING.SECRETS.LENGTH' | translate }}</cnsl-label>
      <input cnslInput name="length" type="number" formControlName="length" id="{{ 'length' + generatorType }}" />
    </cnsl-form-field>

    <div class="slide-toggle-wrapper">
      <mat-slide-toggle
        class="slide-toggle"
        color="primary"
        name="includeDigits"
        formControlName="includeDigits"
        id="{{ 'includeDigits' + generatorType }}"
      >
        <div class="slide-toggle-row">
          <mat-icon class="icon" svgIcon="mdi_numeric"></mat-icon>
          <span class="left-desc">{{ 'SETTING.SECRETS.INCLUDEDIGITS' | translate }}</span>
        </div>
      </mat-slide-toggle>

      <mat-slide-toggle
        class="slide-toggle"
        color="primary"
        name="includeSymbols"
        formControlName="includeSymbols"
        id="{{ 'includeSymbols' + generatorType }}"
      >
        <div class="slide-toggle-row">
          <mat-icon class="icon" svgIcon="mdi_symbol"></mat-icon>
          <span class="left-desc">{{ 'SETTING.SECRETS.INCLUDESYMBOLS' | translate }}</span>
        </div>
      </mat-slide-toggle>

      <mat-slide-toggle
        class="slide-toggle"
        color="primary"
        name="includeLowerLetters"
        formControlName="includeLowerLetters"
        id="{{ 'includeLowerLetters' + generatorType }}"
      >
        <div class="slide-toggle-row">
          <mat-icon class="icon" svgIcon="mdi_format-letter-case-lower"></mat-icon>
          <span class="left-desc">{{ 'SETTING.SECRETS.INCLUDELOWERLETTERS' | translate }}</span>
        </div>
      </mat-slide-toggle>

      <mat-slide-toggle
        class="slide-toggle"
        color="primary"
        name="includeUpperLetters"
        formControlName="includeUpperLetters"
        id="{{ 'includeUpperLetters' + generatorType }}"
      >
        <div class="slide-toggle-row">
          <mat-icon class="icon" svgIcon="mdi_format-letter-case-upper"></mat-icon>
          <span class="left-desc">{{ 'SETTING.SECRETS.INCLUDEUPPERLETTERS' | translate }}</span>
        </div>
      </mat-slide-toggle>
    </div>
  </form>
  <div class="action">
    <button
      (click)="saveSecretGenerator()"
      [disabled]="!specsForm.valid || specsForm.pristine || loading"
      mat-raised-button
      color="primary"
      type="submit"
      id="{{ 'saveSecretGenerator' + generatorType }}"
    >
      <mat-spinner diameter="20" *ngIf="loading"></mat-spinner>
      <span *ngIf="!loading">{{ 'ACTIONS.SAVE' | translate }}</span>
    </button>
  </div>
</cnsl-card>
